• Custom Chart Style Sheet
• Different Style Sheets
• Importing and Exporting Stylesheets
• Stylesheets Dialog

Custom Chart Style Sheet

Description

The chart styles can be customized beyond what is provided in the top level builder, CSS style class names coorespond to chart sections, for example the chart title font and color are set using a style class called 'chart-title'. Here is a complete list of the non-data related chart style class name. Data styling is done using series or data classes depending on the type of chart, and it is generally a good idea to use the genie to get close to the desired style before you start tweaking the style directly in CSS.

• Axis style - setting border color attribute

  chart-axis { border-color:red; }

  

• Axis style - font - setting border color attribute

  chart-axis { color:red; }

  

• Client area - setting background color

  chart-client-area { background-color:red; }

  

• Client area shadow - adding a drop shadow to the client area

  chart-client-area { box-shadow: 3pt 3pt 5pt 5pt Red; }

  

• Grid - setting the grid line color

  chart-grid { color:red; }

  

• Minor Grid - setting the minor grid color

  chart-minor-grid { border-color:red; }

  

• Tick style - setting the tick mark color for both x and y axis

  chart-tick { border-color:red; }

  

• Title style- setting the chart title style

  chart-title { color:red; }

  

• X Axis style- setting x axis border color

  chart-x-axis { border-color:red; }

  

• X Axis style- setting x axis label color

  chart-x-axis { color:red; }

  

• X Axis title style- setting x axis title color

  chart-x-axis-title { color:red; }

  

• X Grid style- setting just the 'x' grid (independent of the y grid).

  chart-x-grid { border-color:red; }

  

• X Minor Grid style- setting just the 'x' minor grid (independent of the y minor grid).

  chart-x-minor-grid { border-color:red; }

  

• X Tick style- setting color for ticks along the x axis only.

  chart-x-tick { border-color:red; }

  

• Y Tick style- setting color for ticks along the y axis only.

  chart-y-axis { border-color:red; }

  

• Y Axis style- setting color for labels on y axis only.

  chart-y-axis { color:red; }

  

• Y Axis Title style- setting color for title on y axis.

  chart-y-axis-title { color:red; }

  

• Y Grid style- setting color for y grid only.

  chart-y-grid { border-color:red; }

  

• Y Minor Grid style- setting color for y minor grid only.

  chart-y-minor-grid { border-color:red; }

  

• Y Tick style- setting color for y ticks only.

  chart-y-tick { border-color:red; }

  

• X alternate style - alternate fill color for x axis in client area

  chart-x-alternate { background-color: Red; }

  

• Y alternate style - alternate fill color for y axis in client area

  chart-y-alternate { background-color: Red; }